<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="isChanged" id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      @keyup.enter="add(name)"
      v-model.trim="name"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
import { now } from 'moment'
export default {
  data() {
    return {
      name:'',
    }
  },
  created(){
    // let res = this.$store.state.list.length
  //  console.log(this.$store.state.list.length);
  // console.log(res);

  
  },
 methods:{
  
   add(){
      if(this.name===''){
     alert('输入框不能为空')
     return
   }
     this.$store.commit('newList',{id:Date.now(),name:this.name,isDone: false})

     this.name=''
    },
   },
   computed:{
    isChanged:{
      set(val){
        this.$store.commit('checked',val)
      },
      get(){
      
        return this.$store.state.list.every(item=>item.isDone)
        // this.$store.commit('checkedOne')
      }
    }
   }

 }

</script>